<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/10/10
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>盘点信息页面</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
<%--根据分店模糊查询--%>
    <el-form :inline="true" :model="goodsSearchForm" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="goodsSearchForm.branchid" placeholder="-请选择分店-">
                <el-option label="-请选择分店-" value="null"></el-option>
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button icon="el-icon-search" circle @click="searchGoods"></el-button>
        </el-form-item>
    </el-form>
    <%--    刷新按钮--%>
    <el-button type="success" @click="inittable" size="small">刷新</el-button>
    <%--    主表格--%>
    <el-table
            :data="tableDate"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
        >
        </el-table-column>
        <el-table-column
                prop="invenid"
                label="盘点编号"
        ></el-table-column>
        <el-table-column
                prop="invenstaffname"
                label="盘点员"
                width="200"
        ></el-table-column>
        <el-table-column
                prop="inventime"
                label="盘点时间"
        ></el-table-column>
        <el-table-column
                prop="examstaffname"
                label="审核员"
        ></el-table-column>
        <el-table-column
                prop="examtime"
                label="审核时间"
        ></el-table-column>
        <el-table-column
                prop="state"
                label="审核状态"
        >
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.state==2"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="danger"
                        v-if="scope.row.state==3"
                        effect="dark">
                    审核不通过
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="所属分店"
        ></el-table-column>
        <el-table-column
                label="详情"
        >
            <template slot-scope="scope">
                <el-button type="primary" @click="code(scope.row.invenid)">详情信息</el-button>
            </template>
        </el-table-column>
    </el-table>
        <%--    分页--%>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[1, 5, 10, 15]"
                :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <%--        详情信息--%>
        <el-dialog
                title="详情信息"
                :visible.sync="dialogVisible1"
                width="50%"
        >
            <template>
                <el-table
                        :data="tableData1"
                        style="width: 100%">
                    <el-table-column
                            prop="lid"
                            label="报损详情ID"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="goodsname"
                            label="商品名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="invennum"
                            label="盘点数量"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="lossnum"
                            label="报损数量"
                    >
                    </el-table-column>
                </el-table>
            </template></el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableDate: [],
            tableData1:[],
            goodsSearchForm: {},
            currentPage: 1,
            pageSize: 5,
            total: 1,
            currentPage1: 1,
            pageSize1: 5,
            dialogVisible1: false,
            branchs:[],
        },
        created(){
            this.inittable();
            this.initbranch();
        },
        methods: {
            // 初始化盘点信息
            inittable(){
                axios.post("/inventory/list1?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,this.goodsSearchForm).then(resp => {
                    this.tableDate = resp.data.data.list
                    this.total = resp.data.data.total
                })
            },
            // 多选框的按钮
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },

            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            //模糊查询搜索按钮
            searchGoods() {
                this.inittable()
            },
            //初始化分店
            initbranch() {
                axios.get("/goods/branch").then(resp => {
                    this.branchs = resp.data.data
                })
            },
            //详情信息按钮
            code(invenid) {
                this.dialogVisible1 = true;
                axios.post("/inventory/goodslist?currentPage=" + this.currentPage1 + "&pageSize=" + this.pageSize1+"&invenid="+ invenid).then(resp => {
                    this.tableData1 = resp.data.data.list
                    this.total1 = resp.data.data.total
                })
            }
        },
    })
</script>
</html>
